<template>
  <div>
    <a-select v-if="type == 'select'" v-model:value="selectValue" :options="options" />
    <a-radio-group v-if="type == 'radio'" v-model:value="selectValue" :options="options" />
    <a-radio-group
      v-if="type == 'button'"
      v-model:value="selectValue"
      option-type="button"
      :options="options"
      :placeholder="placeholder"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import AppCompoentBase from '../../component-base/app-component-base';
  import { enumService } from '/@/shared/utils/enum.service';

  export default defineComponent({
    name: 'g-enum',
    mixins: [AppCompoentBase],
    props: {
      type: {
        type: String,
        default: 'select',
      },
      value: {
        type: [String, Number, Object, Array],
      },
      optionMenu: {
        type: String,
      },
      placeholder: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        selectValue: this.value,
        options: [],
      };
    },
    watch: {
      value: {
        handler(val) {
          this.selectValue = val;
          this.$emit('valueChange', val);
        },
        immediate: true,
      },
      selectValue: {
        handler(val) {
          this.selectValue = val;
          this.$emit('valueChange', val);
        },
      },
    },
    mounted() {
      if (this.optionMenu) {
        const list = enumService.getData(this.optionMenu);
        if (list && list.length) {
          list.map((item) => {
            item['label'] = this.l(item.displayName);
          });
          this.options = list;
        }
      }
    },
  });
</script>
<style lang="less" scoped>
  :deep(.ant-select) {
    width: 100%;
  }
</style>
